<!--
 * @Author: [you name]
 * @Date: 2021-11-04 09:40:12
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-04 14:52:32
 * @Description: 
-->
<template>
    <div class="orderDetail">
        <div class="btns">
            <el-button type="text" @click="$router.go(-1)">返回</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table :data="order.orderLines" style="width:100%">
            <el-table-column prop="id" label="订单编号"></el-table-column>
            <el-table-column prop="productId" label="产品编号"></el-table-column>
            <el-table-column prop="product.name" label="产品名称"></el-table-column>
            <el-table-column label="产品图片">
                <template v-slot="scope">
                    <img :src="scope.row.product.photo" alt="找不到图片" width="50px">
                </template>
            </el-table-column>
            <el-table-column prop="product.price" label="单价"></el-table-column>
            <el-table-column prop="number" label="数量"></el-table-column>

        </el-table>

        <!-- 卡片区域 -->
        <el-row :gutter="20" style="margin-top:1em">
            <el-col :span="6">
                <el-card>
                    <div slot="header">
                        <span>订单基本信息</span>
                    </div>
                    <div class="cradMain">
                        <div>订单编号： {{order.id}}</div>
                        <div>订单金额： {{order.total}}</div>
                        <div>下单时间： {{order.orderTime | fmtDateTime}}</div>
                        <div>订单状态： {{order.status}}</div>
                        

                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">
                        <span>接单者信息</span>
                    </div>
                    <div class="cradMain">
                        <div>接单者： {{order.customer&&order.customer.username}}</div>
                        <div>接单者手机号： {{order.customer&&order.customer.telephone}}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">
                        <span>雇主信息</span>
                    </div>
                    <div class="cradMain">
                        <div>雇主： {{order.address&&order.address.username}}</div>
                        <div>雇主手机号： {{order.address&&order.address.telephone}}</div>
                        <div>服务地址： {{order.address&&order.address.province + order.address.city + order.address.area + order.address.address}}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">
                        <span>订单基本信息</span>
                    </div>
                    <div class="cradMain">
                        <div>订单编号： {{order.id}}</div>
                        <div>订单金额： {{order.total}}</div>
                        <div>下单时间： {{order.orderTime | fmtDateTime}}</div>
                        <div>订单状态： {{order.status}}</div>
                        

                    </div>
                </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            order: {}
        }
    },
    methods: {
        // 查询订单详细信息
        findOrderById(id) {
            request.get('/order/findById', {
                params: {
                    id
                }
            }).then(res => {
                this.order = res.data
            })
        }
    },
    created() {
        // 将路由跳转携带的参数，作为异步请求的实参进行传递
        this.findOrderById(this.$route.query.id)
    }
}
</script>
<style scoped>

</style>